Hi,
if you want to show a left bar and a right bar in the page, you need to modify both the model of your application and the style of the page. You can perform the following steps:
- Add a Master Page
- Populate the Master Page with the needed content units (e.g. an Index Unit representing the left-side bar contents and another Index Unit representing the right-side bar contents)
-
Edit the Page Layout Template of the Master Page, by adding the code which creates the Custom Locations in the Page for hosting the side menu.
A Custom Location is an additional location of the page layout, besides the main grid, where you can insert content units and sub pages. For example, the following code defines the Custom Location for the side bars:
<wr:PageForm>
....
<div class=""left-nav"">
<wr:CustomLocation name=""left-column""/>
</div>
<div class=""right-nav"">
<wr:CustomLocation name=""right-column""/>
</div>
....
</wr:PageForm>
-
Select the Master Page in the model. In the Grid View select the ""left-column"" custom location from the pool and place it in the Grid. Repeat the same thing for the ""righ-column"" custom location.
Select the content unit (e.g. the Index Unit) and place it into the appropriate custom location.
-
Update the css style, with the css rules for correctly positioning the side bars in the page. For example, the left bar ("".left-nav"" class) should be floated to left, in order to place it in the left side of the page.
For more details, you can read these articles:
- Create a Style Project from a mockup
- Getting started with the Style Project